<template>
    <el-row>
        <el-col :span="14">
            <el-button type="text" @click="dialogVisible = true">偷偷留下脚印</el-button>
        </el-col>

        <!-- v-for循环显示出多个卡片，v-if根据数据类型判断是数据卡片还是开关拉片 -->
        <el-col :span="14" v-for="i in moodList" :key="i.id" style="margin-top: 12px">
            <!-- 开关卡片 -->
            <el-card class="box-card">
                <el-divider content-position="left">{{i.moodDate}}</el-divider>
                <div style="width: 480px;margin-left: 30px">
                    {{i.content}}
                </div>
                <el-button type="danger" @click="deleteMood(i.id)" style="margin-left: 520px">删除</el-button>
                <el-divider content-position="left">{{i.remark}}</el-divider>
            </el-card>

        </el-col>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="50%"
                :before-close="handleClose">
            <el-form ref="elForm" :model="formData" size="medium" label-width="80px">
                <el-row :gutter="32">
                    <el-col :span="12">
                        <el-form-item label="内容" prop="content">
                            <el-input v-model="formData.content" placeholder="请输入内容" clearable :style="{width: '100%'}">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="formData.remark" placeholder="请输入备注" clearable :style="{width: '100%'}">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="日期" prop="moodDate">
                            <el-date-picker
                                    v-model="formData.moodDate"
                                    type="date"
                                    placeholder="生日">
                                <el-input v-model="formData.moodDate" placeholder="请输入日期" clearable
                                          :style="{width: '120%'}">
                                </el-input>
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                </el-row>

            </el-form>
            <el-button style="margin-left: 520px" @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false,addMood()">确 定</el-button>

        </el-dialog>
    </el-row>


</template>

<script>
    export default {
        name: "Mood",
        data() {
            return {
                formData:
                    {
                        content: undefined,
                        moodDate: undefined,
                        remark: undefined
                    }
                ,
                moodList: [
                    {
                        content: undefined,
                        moodDate: undefined,
                        remark: undefined
                    }
                ],
                dialogVisible: false
            }
        },
        created() {
            this.getMoodList()
        },
        methods: {
            getMoodList() {
                this.$axios.get("/sys/emsMood/search/1/6").then((response) => {
                    console.log(response)
                    this.moodList = response.data.data.list
                })
            },
            addMood() {
                this.$axios.post("/sys/emsMood/", this.formData).then((response) => {
                    console.log(response);
                    location.reload()
                });
                console.log(this.formData);
                console.log("asdas");
            },
            deleteMood(id){
                this.$axios.delete("/sys/emsMood/"+id).then((response) => {
                    console.log(response);
                    // location.reload()
                });
                console.log(id);
            },
            handleClose(done) {

                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            }
        }
    }
</script>

<style scoped>

</style>